<template>
  <div class="box">
    <video
      v-if="videoType === 'native'"
      :src="vid"
      objectFit="contain"
      :autoplay="true"
      :direction="90"
      :controls="true"
      :enable-auto-rotation="true"
      :style="{width: w, height: h}"
    />
    <txv-video
      v-else
      :vid="vid"
      :playerid="vid"
      objectFit="contain"
      :showFullscreenBtn="true"
      :autoplay="true"
      :isHiddenStop="true"
      direction="0"
      :enableAutoRotation="true"
      :controls="true"
      :width="w"
      :height="h"
      @ended="onEnd"
    />
  </div>
</template>

<script>

export default {
  data(){
    return {
      vid: '',
      w: '100%',
      h: '100%',
    }
  },
  computed: {
    videoType() {
      return this.vid.indexOf('https') > -1 ? 'native' : 'plugin'
    },
  },
  onLoad(options){
    this.contentId = options.id;
    this.vid = options.vid;
  },
  onShow(){

  },
  methods: {
    onEnd() {

    }
  }
}
</script>

<style lang="stylus" scoped>
.box {
  background: #000;
  padding-bottom: 20px;
  height: 100vh;
}
</style>

